<script lang="ts" setup>
import dayjs from 'dayjs'
import { OrderStatus, myOrderSetDFH } from '@/api/order'
import type { MyOrderItem, MyOrderSetDFHSendModel } from '@/api/order'
import { setSku_list, setSpec_list } from '@/views/goods/set_Sku_data'
import type { SkuListItem, SpecListItem } from '@/views/goods/set_Sku_data'

interface MyOrderTableItem extends MyOrderItem {
  sku_list?: SkuListItem[]
  spec_list?: SpecListItem[]
}
interface Props {
  orderStatus: string
  tableData: MyOrderTableItem[]
}

const props = withDefaults(defineProps<Props>(), {
  orderStatus: '',
  tableData: () => [],
})

const emit = defineEmits<{
  (e: 'getList', orderStatus: string): void
}>()

const { tableData } = toRefs(props)

// 初始化数据格式
watch(() => tableData.value, (newVal) => {
  newVal.forEach((item) => {
    item.cart_num = item.list[0].cart_num // 订单列表list数组只有一个
    if (item.none_sku) { // 无规格
      item.sku_list = setSku_list(item.goods, item.none_sku ? 'none' : '')
      item.spec_list = setSpec_list(item.goods.skuList, item.none_sku ? 'none' : '')
    }
    else { // 有规格
      item.goods.list = item.list // 替换成已选择的组合列表

      item.sku_list = setSku_list(item.goods, item.none_sku ? 'none' : '')
      item.spec_list = setSpec_list(item.goods.skuList, item.none_sku ? 'none' : '')
    }
  })
})

// 商品发货
async function setGoodsOrderStatus(data: MyOrderSetDFHSendModel) {
  const { code, msg } = await myOrderSetDFH(data)
  if (code === 0) {
    window.$message?.success(msg)
    emit('getList', props.orderStatus)
  }
}

// 过滤方法
function skuListItemPrice(sku_list: SkuListItem[] | undefined, cart_num: number | undefined) { // 计算订单总价
  const prices = sku_list!.map(item => Number(item.price) * cart_num!)
  return prices.length > 0 ? prices.reduce((n, m) => n + m).toFixed(2) : 0
}
function orderStatusText(status: string) { // 订单状态文案转换
  switch (status) {
    case 'DFK': return '待付款'
    case 'DFH': return '待发货'
    case 'DSH': return '待收货'
    case 'DPJ': return '待评价'
    case 'YQX': return '已取消'
    case 'YWC': return '已完成'
  }
}
</script>

<template>
  <n-grid x-gap="10" :cols="10" bg-white p-10 text-14 b-rd-5 dark:bg-dark>
    <n-gi f-c-c font-bold>
      下单时间
    </n-gi>
    <n-gi f-c-c font-bold>
      订单号
    </n-gi>
    <n-gi f-c-c font-bold>
      商品封面
    </n-gi>
    <n-gi f-c-c font-bold>
      商品名称
    </n-gi>
    <n-gi f-c-c font-bold>
      购买信息
    </n-gi>
    <n-gi f-c-c font-bold>
      订单总价
    </n-gi>
    <n-gi f-c-c font-bold>
      订单状态
    </n-gi>
    <n-gi f-c-c font-bold>
      买家昵称
    </n-gi>
    <n-gi span="2" f-c-c font-bold>
      操作
    </n-gi>
  </n-grid>
  <template v-if="tableData.length > 0">
    <n-grid v-for="item in tableData" :key="item.id" x-gap="15" :cols="10" bg-white p-10 text-14 b-rd-5 mt-10 dark:bg-dark>
      <n-gi f-c-c>
        {{ dayjs(item.createTime || new Date()).format('YYYY-MM-DD HH:mm') }}
      </n-gi>
      <n-gi f-c-c>
        <n-ellipsis>
          {{ item.orderId }}
        </n-ellipsis>
      </n-gi>
      <n-gi f-c-c>
        <Cimage
          width="80"
          height="80"
          :src="item.goods.iconId[0].url"
        />
      </n-gi>
      <n-gi f-c-c>
        <n-ellipsis>
          {{ item.goods.name }}
        </n-ellipsis>
      </n-gi>
      <n-gi f-c-c>
        <div v-for="value in item.sku_list" :key="value._id">
          <span>{{ value.sku_name_arr.toString() }}</span>
          <span> x{{ item.cart_num }}</span>
        </div>
      </n-gi>
      <n-gi f-c-c style="color: #ff6600">
        {{ skuListItemPrice(item.sku_list, item.cart_num) }}
      </n-gi>
      <n-gi f-c-c>
        {{ orderStatusText(item.orderStatus) }}
      </n-gi>
      <n-gi f-c-c>
        {{ item.user.userName || '未命名买家' }}
      </n-gi>
      <n-gi f-c-c span="2">
        <n-button size="small" type="tertiary" text-14 ml-5 mt5>
          <template #icon>
            <icon-ri:search-line />
          </template>
          详 情
        </n-button>
        <n-button v-if="orderStatus === 'DFH'" type="info" size="small" text-14 ml-5 mt5 @click="setGoodsOrderStatus({ id: item.id, orderStatus: OrderStatus.DSH })">
          <template #icon>
            <icon-mdi:square-edit-outline />
          </template>
          发 货
        </n-button>
      </n-gi>
    </n-grid>
  </template>
  <template v-else>
    <div bg-white p-10 text-14 font-bold b-rd-5 mt-10 dark:bg-dark f-c-c pt-20 pb-20>
      暂无数据
    </div>
  </template>
</template>
